<template>
  <div ref="chart" class="the-time-chart"></div>
</template>
<script>
import axios from "axios";
import randomcolor from "randomcolor";
import Color from "color";
import * as echarts from 'echarts';
// var echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/scatter");
// require("echarts/lib/chart/line");
// require("echarts/lib/chart/radar");
// require("echarts/lib/chart/custom");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// require("echarts/lib/component/axis");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/legend");
// debugger
const INPUT =
  "https://qimage.owhat.cn/prod/master/image/72e5de64-29d9-40a1-bdfb-6f897e1535c2";
const OUTPUT =
  "https://qimage.owhat.cn/prod/master/image/ea761c11-d372-43f1-bc9c-6b87f9d38821";
export default {
  name: "Traclus",
  data() {
    return {};
  },
  mounted() {
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele);
    const SanhokLength = 408000;
    const MapSize = 1000;
    let _scale = MapSize / SanhokLength;

    this.ajaxGetData().then(data => {
      // debugger;
      let input_trajectories = data.input.trajectories.filter(e => e[0].x > 10);
      let output_trajectories = data.output;
      // debugger;
      let input_series = {
        type: "custom",
        name: "shuru",
        coordinateSystem: "cartesian2d",
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: input_trajectories.map((e, i) => {
          // console.log(JSON.stringify(e));
          // debugger
          return [i];
        }),
        renderItem: function(params, api) {
          let i = api.value(0);
          debugger;
          let points =
            [
              [0, 0],
              [100, 100 + i * 10],
              [250, 230 + i]
            ] || input_trajectories[i].map(e => [e.x, e.y].map(x => x + 200));
          let opoints = points.map(e => {
            debugger;
          });
          debugger;
          return {
            type: "polyline",
            // progressive: true,
            shape: {
              points: points,
              smooth: 0.5
            },
            style: {
              stoke: "rgba(255,255,0,0.5)",
              lineWidth: 5,
              fill: "rgba(0,0,0,0.1)"
            }
          };
        }
      };
      let input_as_line = input_trajectories.map(e => {
        // debugger
        return {
          type: "line",
          name: "line-Input",
          data: e.map(x => [x.x, x.y]),
          lineStyle: {
            color: "gray",
            opacity: 0.5
          },
          itemStyle: {
            opacity: 0
          }
        };
      });
      let output_as_line = output_trajectories.map(e => {
        return {
          type: "line",
          name: "line-Input",
          data: e.map(x => [x.x, x.y]),
          lineStyle: {
            color: "blue"
          },
          itemStyle: {
            opacity: 0
          }
        };
      });

      chart.setOption({
        title: {
          text: ""
        },
        backgroundColor: "wheat",
        tooltip: {
          trigger: "axis"
        },
        grid: {},
        xAxis: { type: "value", scale: true },
        yAxis: { type: "value", scale: true },
        legend: {
          left: "center",
          data: []
        },
        graphic: [],
        series: [
          // input_series,
          ...input_as_line,
          ...output_as_line
        ]
      });
    });
  },
  methods: {
    ajaxGetData() {
      return new Promise(resolve => {
        axios
          .get(INPUT)
          .then(in_axresp => {
            axios
              .get(OUTPUT)
              .then(out_axresp => {
                resolve({
                  input: in_axresp.data,
                  output: out_axresp.data
                });
              })
              .catch(axerr => {
                debugger;
              });
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.the-time-chart {
  width: 1000px;
  height: 1000px;
}
</style>